<template>
  <div class="life-record-card card-item">
    <el-carousel v-if="props.foodItem?.recordList.length > 0"
                 arrow="always" @change="changeFoodEvent">
      <el-carousel-item v-for="(item, index) in getFoodRecord(props.foodItem?.recordList)"
                        :key="index">
        <el-image :src="serviceFileRootPath + item.imageUrl"
                  fit="contain" alt="暂无成果">
          <template #error>
            <div class="image-slot">
              <span>暂无图片</span>
            </div>
          </template>
        </el-image>
      </el-carousel-item>
    </el-carousel>

    <el-empty v-else description="暂无成果" />

    <div class="record-info">
      <div class="top-container">
        <div class="info-list">
          <div class="info-item">
            <span class="title">{{ props.foodItem.name }}</span>
          </div>
        </div>

        <div class="button-info">
          <el-button v-if="!isMobile()"
                     type="primary" :icon="Edit" circle :size="'small'"
                     @click="editFoodRecipeClick"/>
          <el-button type="primary" :icon="MoreFilled" circle :size="'small'"
                     @click="viewFoodRecipeClick()" />
          <el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
                     @click="deleteFoodRecipeClick()" />
        </div>
      </div>

      <div class="bottom-container">
        <div class="info-list">
          <div class="info-item category-item">
            <i class="fa-solid fa-utensils"></i>
            {{ props.foodItem.category }}
          </div>
        </div>

        <div v-if="props.foodItem?.recordList.length > 0" class="info-list">
          <div class="info-item">
            <i class="fa-solid fa-flag"></i>
            {{ props.foodItem.recordList[foodCardInfo.currentFoodIndex].person}}
          </div>
          <div class="info-item">
            <i class="fa-regular fa-calendar-check"></i>
            {{ formatDate(props.foodItem.recordList[foodCardInfo.currentFoodIndex].date) }}
          </div>
        </div>

        <div v-else>
          <span>暂无成果</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
import { useFoodStore } from '@/store/food.ts'
import { defineProps, onMounted, PropType, reactive } from 'vue'
import { IFoodRecipe, IFoodRecord } from '@/types/food.ts'
import { useRouter } from 'vue-router'
import { formatDate } from 'vue3-common/utils/dateUtil'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { serviceFileRootPath } from '@/utils'
import { isMobile } from 'vue3-common/utils/layoutUtil'

const router = useRouter()
const foodStore = useFoodStore()

const foodCardInfo = reactive({
  recommendRate: 0,
  currentFoodIndex: 0
})

const props = defineProps({
  foodItem: {
    required: true,
    type: Object as PropType<IFoodRecipe>
  }
})

onMounted(() => {
  foodCardInfo.recommendRate = props.foodItem?.recommendRate as number
})

const getFoodRecord = (recordList: IFoodRecord[]) => {
  return recordList.filter((item) => item.imageUrl)
}

const editFoodRecipeClick = async () => {
  const id = props.foodItem?.id
  foodStore.foodRecipeApiType = 'UPDATE'
  await foodStore.queryFoodRecipe(id as number)
  foodStore.foodRecipeDialog = {
    title: '编辑菜谱',
    visible: true,
    data: deepCopyObject(foodStore.currentFoodRecipe)
  }
}

const viewFoodRecipeClick = async () => {
  await router.push({ name: 'FoodDetailId', params: { id: props.foodItem?.id } })
}

const deleteFoodRecipeClick = () => {
  foodStore.foodRecipeApiType = 'DELETE'
  commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
    foodStore.handleFoodRecipeApi(props.foodItem?.id as number)
  })
}

const changeFoodEvent = (current: number) => {
  foodCardInfo.currentFoodIndex = current
}
</script>

<style lang="scss">
@use "@/styles/home/life.record.module";
</style>
